<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<title>商城首页</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"
	content="New Trendz Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

<link href="<%= basePath%>css/bootstrap.css" rel='stylesheet'
	type='text/css' />
<link href="<%= basePath%>css/style.css" rel='stylesheet'
	type='text/css' />
<script src="<%= basePath%>js/jquery.min.js"> </script>
<link rel="shortcut icon" type="image/x-icon"
	href="../images/defaultheadpic.png" />

<link
	href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700|Cinzel+Decorative:400,700'
	rel='stylesheet' type='text/css'>
<link rel="shortcut icon" type="image/x-icon"
	href="<%=basePath%>images/defaultheadpic.png" />
<style>
#img {
	position: absolute;
	left: 100px;
}

.icon-text {
	font-family: 华文楷体;
}
</style>

</head>
<body>
	<!--start-home-->
	<div class="full">
		<span class="menu"></span>
		<div class="navbar">
			<a class="menu" href="#"><i class="icon-align-justify"></i></a> <a
				class="link hme" href="<%=basePath%>jsp/zhuye.jsp"> <span
				class="active"><span class="valign"><span
						class="vertical">数码次元</span></span></span> <span class="hover"><span
					class="valign"><span class="vertical">数码次元</span></span></span>
			</a> <a class="link abt" href="<%=basePath %>jsp/cart.jsp"> <span
				class="active"><span class="valign"><span
						class="vertical">购物车</span></span></span> <span class="hover"><span
					class="valign"><span class="vertical">购物车</span></span></span>
			</a> <a class="link abt" href="<%=basePath %>goods/myOrder.action"> <span
				class="active"><span class="valign"><span
						class="vertical">我的订单</span></span></span> <span class="hover"><span
					class="valign"><span class="vertical">我的订单</span></span></span>
			</a> <a class="link abt" href="<%=basePath%>goods/myOrder.action"> <span
				class="active"><span class="valign"><span
						class="vertical">个人中心</span></span></span> <span class="hover"><span
					class="valign"><span class="vertical">个人中心</span></span></span>
			</a> <a class="link abt" href="<%=basePath%>quchoujiang.action"> <span
				class="active"><span class="valign"><span
						class="vertical">去抽奖</span></span></span> <span class="hover"><span
					class="valign"><span class="vertical">去抽奖</span></span></span>
			</a>
		</div>
		<!-- script for menu -->
		<script>
        $( "span.menu" ).click(function() {
            $( ".navbar" ).slideToggle( "slow", function() {
                // Animation complete.
            });
        });
    </script>
		<!--main-->
		<div class="main">
			<div id="home" class="header">
				<div class="header-top">
					<div class="container">
						<div class="logo">
							<a href=""><h1 style="font-family: '本墨锵黑'">
									商<br> <span style="font-family: '本墨锵黑'">城</span>
								</h1></a>
						</div>
					</div>
				</div>
			</div>
			<!--about-->


			<!----trends--->
			<div class="trends">
				<div class="second-head">
					<h3>数码世界</h3>
					<p>
						如今科学技术高速发展，所有电子产品在经历不断的更新迭代，是不断的追随最新的技术？还是选择最适合自己的？这是一个值得深思的问题.</p>
					<p>这里给你不一样的选择。</p>
				</div>
				<div class="grid">
					<figure class="effect-terry">
						<img src="<%= basePath%>images/p5.jpg" alt="img26"
							style="height: 650px" />
						<figcaption>
							<h2>
								<a href="<%= basePath %>goods/glist.action?categoryid=3">
									锐度&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>手机</span>
								</a>
							</h2>
							<p>
								<a href="#"><i class="download"></i></a> <a href="#"><i
									class="heart"></i></a> <a href="#"><i class="share"></i></a> <a
									href="#"><i class="tag"></i></a>
							</p>
						</figcaption>
					</figure>
					<figure class="effect-terry">
						<a href="<%= basePath %>goods/glist.action?categoryid=1"><img
							src="<%= basePath%>images/p1.jpg" alt="img26" />

							<figcaption>
								<h2>
									<a href="<%= basePath %>goods/glist.action?categoryid=1">烈焰&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										<span>笔电</span>
									</a>
								</h2>
								<p>
									<a href="#"><i class="download"></i></a> <a href="#"><i
										class="heart"></i></a> <a href="#"><i class="share"></i></a> <a
										href="#"><i class="tag"></i></a>
								</p>
							</figcaption>
					</figure>
					<figure class="effect-terry">
						<img src="<%= basePath%>images/p2.jpg" alt="img26" />
						<figcaption>
							<h2>
								<a href="<%= basePath %>goods/glist.action?categoryid=4">莱斯璧&nbsp;&nbsp;&nbsp;
									&nbsp;&nbsp;&nbsp;<span> 相机</span>
								</a>
							</h2>
							<p>
								<a href="#"><i class="download"></i></a> <a href="#"><i
									class="heart"></i></a> <a href="#"><i class="share"></i></a> <a
									href="#"><i class="tag"></i></a>
							</p>
						</figcaption>
					</figure>
					<figure class="effect-terry">
						<img src="<%= basePath%>images/p1.jpg" alt="img26" />
						<figcaption>
							<h2>
								<a href="<%= basePath %>goods/glist.action?categoryid=2">花漾&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<span>平板</span>
								</a>
							</h2>
							<p>
								<a href="#"><i class="download"></i></a> <a href="#"><i
									class="heart"></i></a> <a href="#"><i class="share"></i></a> <a
									href="#"><i class="tag"></i></a>
							</p>
						</figcaption>
					</figure>
					<figure class="effect-terry">
						<a href="<%= basePath %>goods/glist.action?categoryid=5"><img
							src="<%= basePath%>images/p3.jpg" alt="img16" /></a>
						<figcaption>
							<h2 style="font-family: Tahoma, Geneva, sans-serif">
								<a href="<%= basePath %>goods/glist.action?categoryid=5">最新&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<span> 手表</span>
								</a>
							</h2>
							<p>
								<a href="#"><i class="download"></i></a> <a href="#"><i
									class="heart"></i></a> <a href="#"><i class="share"></i></a> <a
									href="#"><i class="tag"></i></a>
							</p>
						</figcaption>
					</figure>
				</div>
				<div class="clearfix"></div>
			</div>
			<!--/start-featured-->
			<div class="featured-section">
				<div class="second-head">
					<h3>THE SECRET OF DIGITAL</h3>
					<p>We all love a good life. Here we can share digital and a
						good lif.</p>
				</div>
				<div id="img">
					<img src="<%=basePath %>img/18.jpg" width="600px" height="450px" />
				</div>
				<div class="featured-video">
					<div class="col-md-6 video"></div>
					<div class="col-md-6 video-text">
						<h4>数码的奥秘</h4>
						<p>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数码产品不仅仅冷冷冰冰的电子产品，
							在更多的时候，能够在其主人手中变成更加有意义的事务。电脑：让世界进入了信息时代。手机：
							能够让人们即时的联系，哪怕相隔万里。相机：留住时间所有的美好事物瞬间，让人能够不断的回味其中。 手表：为人们带来准确的时间。 <br />
						</p>
						<p class="second">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							Digital products are not just cold electronic products, In more
							times, it can become more meaningful affairs in the hands of its
							owners. Computer: let the world enter the information age. Mobile
							phone: It can make people connect in real time, even thousands of
							miles apart. Camera: keep all the beautiful things in time, let
							people constantly aftertaste them. Watch: bring people accurate
							time.</p>
						<a class="read" href="#">阅读更多....</a>

					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<!--/start-bottom-->
			<div class="bottom-section">
				<div class="second-head two"></div>
			</div>
			<!--/start-footer-section-->
			<div class="footer-section">
				<div class="footer-grids">
					<div class="col-md-3 footer-grid">
						<h4>最受欢迎</h4>
						<div class="border2"></div>
						<p>手机系列「iphone 11」年度最强ios手机</p>
						<p class="sub">手机系列 「一加8」年度最强安卓手机</p>
						<p class="sub">相机系列 「徕卡」记录美好的事物</p>

					</div>
					<div class="col-md-3 footer-grid tags">
						<h4>类别</h4>
						<div class="border2"></div>
						<ul class="tag">
							<li><a href="#">手 机</a></li>
							<li><a href="#">电 脑</a></li>
							<li><a href="#">平 板</a></li>
							<li><a href="#">相 机</a></li>
							<li><a href="#">手 表</a></li>
							<li><a href="#">其 他</a></li>
						</ul>
					</div>
					<div class="col-md-3 footer-grid tweet">
						<h4>关于我们</h4>
						<div class="border2"></div>
						<div class="icon-3-square">
							<a href="#"><i class="square-3"></i></a>
						</div>
						<div class="icon-text">
							<ul>
								<li><a href="#">选 择 数 码 次 元</a></li>
								<li><a href="#">数 码 次 元 商 城</a></li>
								<li><a href="#">数 码 次 元 中 心</a></li>
								<li><a href="#">品 类 选 择</a></li>
							</ul>
						</div>

						<div class="clearfix"></div>
						<div class="icon-3-square">
							<a href="#"><i class="square-3"></i></a>
						</div>
						<div class="icon-text">
							<ul>
								<li><a href="#">服 务 中 心</a></li>
								<li><a href="#">常 见 问 题</a></li>
								<li><a href="#">联 系 我 们</a></li>
								<li><a href="#">tel:157-9786-2663</a></li>
								<li><a href="#">email:1421070960@qq.com</a></li>
							</ul>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="col-md-3 footer-grid flickr">
						<h4>flickr feed</h4>
						<div class="border2"></div>
						<div class="flickr-grids">
							<div class="flickr-grid">
								<a href="#"><img src="<%= basePath%>images/1_06.jpg" alt="" /></a>
							</div>
							<div class="flickr-grid">
								<a href="#"><img src="<%= basePath%>images/4_15.jpg" alt="" /></a>
							</div>
							<div class="flickr-grid">
								<a href="#"><img src="<%= basePath%>images/6_03.jpg" alt="" /></a>
							</div>
							<div class="clearfix"></div>

							<div class="flickr-grid">
								<a href="#"><img src="<%= basePath%>images/3_05.jpg" alt="" /></a>
							</div>
							<div class="flickr-grid">
								<a href="#"><img src="<%= basePath%>images/2_04.jpg" alt="" /></a>
							</div>
							<div class="flickr-grid">
								<a href="#"><img src="<%= basePath%>images/5_09.jpg" alt="" /></a>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<!--//end-footer-section-->
			<!--/start-copyright-section-->
			<div class="copyright">
				<p class="write">
					Copyright &copy; 2020 All rights Reserved | Design by <a href="#">Hadwinling</a>
				</p>
			</div>
		</div>
	</div>
	<!--start-smoth-scrolling-->
	<script type="text/javascript">
    jQuery(document).ready(function($) {
        $(".scroll").click(function(event){
            event.preventDefault();
            $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
        });
    });
</script>
	<!--start-smoth-scrolling-->
	<script type="text/javascript">
    $(document).ready(function() {
        /*
        var defaults = {
              containerID: 'toTop', // fading element id
            containerHoverID: 'toTopHover', // fading element hover id
            scrollSpeed: 1200,
            easingType: 'linear'
         };
        */

        $().UItoTop({ easingType: 'easeOutQuart' });

    });
</script>
	<a href="#home" id="toTop" class="scroll" style="display: block;">
		<span id="toTopHover" style="opacity: 1;"> </span>
	</a>

</body>
</html>